<script setup>
import {useStore} from "vuex";
import {setItem} from "../../utils/WebUtil";
import {computed} from "vue";
import {useRouter} from "vue-router";

const router=useRouter();
const store=useStore();

const user = computed(() => {
    return store.state.user;
})

function logout() {
    setItem('auth', null);
    router.push('/login')
}
</script>

<template>
    <el-dropdown>
        <div class="flex row center align-center" style="cursor: pointer">
            <img :src="user.avatar" alt="" style="border-radius: 50%;height: 40px">
            <span>{{ user.userName }}</span>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item><a href="https://gitee.com/tangming991" target="_blank">代码仓库</a></el-dropdown-item>
                <el-dropdown-item divided><span @click="logout">退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<style scoped>
a {
    text-decoration: none;
    color: #304455;
}
</style>
